<template>
	<view>
		<page-head headTitle="编辑资料" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<picture-upload class="m-t9" :image="image" @changeImg="changeImg"></picture-upload>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton">
			<text class="fs-3 letter-s3 width-1">年代</text>
			<view class="flex align-center">
				<view class="flex address">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="flex fs-3 m-r1 info white-space">{{array[index]}}</view>
					</picker>
				</view>
				<image class="slide-downward" src="/static/images/slide-downward.png"></image>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton">
			<text class="fs-3 letter-s3 width-1">性别</text>
			<view class="flex align-center" >
				<radio-group @change="radioChange" class="flex">
					<label  v-for="(item, index) in items" :key="item.value">
						<view class="flex align-center ml">
							<radio style="transform:scale(0.7)" color="#ffeb0f"  :value="item.value" :checked="index === current" />
							<view class="fs-3">{{item.name}}</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton" style="padding-right: 0 !important;">
			<text class="fs-3 width-1">服务中心</text>
			<view class="flex align-center justify-end" style="width: 100%;">
				<view class="flex address">
				    <text class="iconfont icon-dingwei store-icon m-r" style="font-size: 44rpx;"></text> 
					<text class="flex align-center fs-3 info white-space justify-end">
						{{currentCity}}{{district}}
					</text>
				</view>
				<image class="arrow m-r1" src="/static/images/icon_right_arrow.png"></image>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 width-1">服务语言</text>
		</view>
		<view class="p-l-r3 bg-white padding-bottom p-b5 border-botton">
			<textarea v-model="language" class="border width bg-textarea height p-t-b4 p-l-r fs-3" placeholder-class="color-t" placeholder="请输入个人标签,多个标签用空格隔开..."/>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 width-1">服务城市</text>
		</view>
		<view class="p-l-r3 bg-white padding-bottom p-b5 border-botton">
			<textarea v-model="city" class="border width bg-textarea height p-t-b4 p-l-r fs-3" placeholder-class="color-t" placeholder="请输入个人标签,多个标签用空格隔开..."/>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 letter-s3 width-1">标签</text>
		</view>
		<view class="p-l-r3 bg-white padding-bottom p-b5 border-botton">
			<textarea v-model="tags" style="height: 220rpx;" class="border width bg-textarea p-t-b4 p-l-r fs-3" placeholder-class="color-t" placeholder="请输入个人标签,多个标签用空格隔开..."/>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 letter-s3 width-1">相册</text>
		</view>
		<view class="p-l2 p-r2 bg-white padding-bottom p-b5 flex flex-wrap">
			<view style="position: relative;" v-for="(item,index) in album" :key="index" class="album m-b2">
				<image :src="item" :data-src="item" class="album-pic" @tap="previewImage">
				<view class="close" @tap="delect(index)"><image src="/static/images/icon_delete88.png" class="album-image"></view>
			</view>
			<image src="/static/images/upload-photos.png" @click="changeImgAlbum" class="upload-photos ml-2 m-r1">
		</view>
		<bright-button title="提交" class="m-t-b" @licekSubmit="licekSubmit"></bright-button>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import brightButton from '@/components/common/bright-button.vue'
import pictureUpload from '@/components/common/picture-upload.vue'
	export default {
		components:{
			pageHead,
			brightButton,
			pictureUpload
		},
		data() {
			return {
				image:'/static/images/picture.png',
				id:0,
				items:[
					{
						value: '1',
						name: '男'
					},
					{
						value: '2',
						name: '女'
					}],
					current: 0,
					array: ['00','90', '80', '70', '60', '50', '40', '30'],
					index:-1,
					language:'',
					city:'',
					tags:'',
					album:[],
					currentCity:'',
					lat:'',
					lng:'',
					district:''
			}
		},
		onLoad() {
			this.getUserInfo();
			this.getMyLocation();
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			clickLeftReturn(){
				uni.navigateTo({
				    url: '../index/index'
				});
			},
			//头像上传
			changeImg(){
				var Token = uni.getStorageSync('token');
				console.log(Token);
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:(res)=> {
						//获取图片路径
						//this.image = res.tempFilePaths[0];
						//console.log(res.tempFilePaths[0]);	
						uni.uploadFile({
							url:'http://175.24.68.5:9999/api/file/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'avatar'	
							},
							header: {
								'XX-Device-Type':'wxapp',
								'XX-Token': Token
							},
						    success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								if(data.code == 1){
									this.image = data.data.url;
								}
								//console.log(data);
							}
						});	
				    }
				});
			},
			bindPickerChange(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			//上传相册
			changeImgAlbum(){
				var Token = uni.getStorageSync('token');
				//console.log(Token);
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:(res)=> {
						//获取图片路径
						//this.image = res.tempFilePaths[0];
						//console.log(res.tempFilePaths[0]);	
						uni.uploadFile({
							url:'http://175.24.68.5:9999/api/file/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'show'	
							},
							header: {
								'XX-Device-Type':'wxapp',
								'XX-Token': Token
							},
						    success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								var arr = [];
								if(data.code == 1){
									this.album.push(data.data.url);
								}
								//console.log(this.album);	
							}
						});	
				    }
				});
			},
			//图片预览
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.album
				})	
			},
			//删除图片
			delect(index){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该图片？',
					success: (res) =>{
						console.log(res);
						if (res.confirm) {
							//删除数组中指定项
							function removeByValue(arr, val) {
								for(var i=0; i<arr.length; i++) {
									if(arr[i] == val) {
										arr.splice(i, 1);
										break;
									}
								}
							}
							var imageUrl = that.album.splice(index, 1)
							console.log(imageUrl);
							removeByValue(that.album, imageUrl);	
						} 
					}
				});
			},
			getUserInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/guide/edit'	
				}).then(res=>{
				    console.log(res.data);
					let data = res.data;
					let content = data.data;
					if(data.code == 1){
						this.id = content.id;
						this.image = content.avatar;
						this.array[this.index] = content.years;
						this.current = content.sex;
						this.language = content.language;
						this.city = content.city;
						this.tags = content.tags;
						 this.album = content.album;
					}
					
				});
			},
			//获取当前位置
			getMyLocation() {
				let _this = this;
			    const KEY ='ZMNBZ-K3H3D-V4W4I-PVLQV-JO7PJ-CJFRD'; //key 必填
			    let url = 'https://apis.map.qq.com/ws/location/v1/ip';
			    _this.$jsonp(url,{
			      key:KEY,
			      callbackName: 'QQmap',
			      output:'jsonp',
			    }).then(json => {
			    	var result = json.result;
			    	console.log(result);
			    	this.currentCity = result.ad_info.city;
					this.district = result.ad_info.district;
					this.lat = result.location.lat;
					this.lng = result.location.lng;
			    })
			},
			licekSubmit(){
			this.$myRequest({
					method:'POST',
					url:'/api/guide/submitedit',
					data:{
						id:this.id,	
						avatar:this.image,
						years:this.array[this.index],
						sex:this.current,
						language:this.language,
						city:this.city,
						tags:this.tags,
						album:this.album.join(','),
						lng:this.lng,
						lat:this.lat,
						guide_city:this.currentCity
					}
				}).then(res=>{
				    console.log(res);
					uni.showToast({
					    title: '提交成功',
					    duration: 2000
					});
				});
			},
			
					
				
		}
	}
</script>

<style scoped>
.m-t-b{margin-top: 150rpx;margin-bottom: 60rpx;}
.address{width: 460rpx;justify-content:flex-end;}
.info{max-width: 400rpx;}
.slide-downward{width: 24rpx;height: 18rpx;}
.upload-photos{width: 202rpx;height: 200rpx;}
.album{width: 200rpx; height: 200rpx;margin-left:19rpx;margin-right: 19rpx;}
.album-pic{width: 100%; height: 200rpx;}
.close{position: absolute; top: 0;right: 0;width: 50rpx;height: 50rpx;}
.album-image{width: 100%;height: 50rpx;}
</style>
